<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>任务列表</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="https://og6593g2z.qnssl.com/fundebug.0.3.3.min.js" apikey="e65b1e28cd641345cd31ef6dce8ac62f7aaa3ba3420be5a1c4aa23ee3636992d"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/productTask/moment.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/productTask/vue.min.js{$Think.config.RESOURCE_VER}"></script>
    <!--<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">-->
    <link href="{$Think.config.SERVER_NAME}/wx_assets/productTask/iview.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="{$Think.config.RESOURCEURL}wx_assets/productTask/iview.min.js{$Think.config.RESOURCE_VER}"></script>
    <link href="{$Think.config.RESOURCEURL}wx_assets/productTask/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/iconfont/iconfont.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <style media="screen">
      body {
        background: #f5f4f9;
      }
      .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover {
        color: #F75493;
        border-bottom: 2px solid #F75493;
      }
      .search-feild {
        background: #fff;
        position: relative;
        padding: 11px 12px;
        margin-bottom: 10px;
        height: 50px;
        box-sizing: border-box;
      }
      .search-feild .iconfont {
        position: absolute;
        left: 20px;
        top: 18px;
      }
      .search-feild input {
        width: 100%;
        height: 30px;
        padding-left: 30px;
        box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid #f0f0f0;
        border-radius: 4px;
      }
      .iconfont {
        color: #ccc;
      }
      .list {

      }
      .list .item {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d2d1d185;
        background: #fff;
        padding: 10px 12px;
      }
      .list .item img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .list .item .avatar {
        color: #fff;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
        background: #ccc;
        text-align: center;
        line-height: 50px;
        font-size: 30px !important;
      }
      .list .item .name .iconfont {
        padding-left: 6px;
      }
    </style>
</head>
<body>
<div id="app">
  <div class="search-feild">
    <input type="text" v-model="keyWords" placeholder="输入姓名、昵称、手机号" @change="handleInputChange">
    <i class="iconfont">&#xe63c;</i>
  </div>
    <i-menu mode="horizontal" active-name="" class="menu" @on-select="menuChange">
        <menu-item name="" class="menuItem">全部好友</menu-item>
        <menu-item name="yes" class="menuItem">已关注好友</menu-item>
        <menu-item name="no" class="menuItem">未关注好友</menu-item>
    </i-menu>
    <section class="list">
        <ul>
            <li v-for="(item, index) in list" :key="item.id" class="item">
                <img v-if="item.profileUrl" :src="item.profileUrl" alt="">
                <i v-else class="iconfont avatar">&#xe678;</i>
                <div class="right-feild">
                  <div class="name">
                    <span v-if="item.nickname">{{item.nickname}}</span>
                    <span v-else>(未关注)</span>
                    <i class="iconfont" :style="item.nickname ? 'color: #F75493;' : ''">&#xe678;</i>
                  </div>
                  <div class="time">{{item.createTime}}</div>
                </div>
            </li>
        </ul>
    </section>
</div>
</body>
<script>
    var baseUrl = '{$Think.config.SERVER_HOST}';
    var app = new Vue({
        el: '#app',
        data:function() {
            return {
                list:[],
                start:0,
                limit:10,
                total:0,
                menuIndex: '',
                keyWords: ''
            }
        },
        mounted:function(){
            this.init();
        },
        methods:{
            init:function(){
                this._initEvent();
                this._loadList(this.start);
            },
            _initEvent:function(){
                var me=this;
                $.util.initDataLoading({
                    me:this,
                    lastChildren:function(){
                        return $(".list li:last");
                    },
                    page:function(){
                        return me.start;
                    },
                    pageCount:function(){
                        return me.total / me.limit;
                    }
                });
            },
            _loadList:function(start,callback){
                var self = this,
                    limit = this.limit,
                    status = this.menuIndex,
                    search = this.keyWords;
                var params={
                    register:status,
                    search:search,
                    start:start,
                    limit:limit
                };
                this.$Spin.show();
                $.req.get("call.json?customerId={$customerId}&module=personCenter&method=recommenderUserList",{
                    params:params
                },function(data){
                    self.$Spin.hide();
                    if(data&&data.data){
                        if(start<=0){
                            self.list = data.data;
                        }else{
                            self.list = self.list.concat(data.data);
                        }
                        self.total = data.total;
                        self.start = start;
                    }else{
                        if(start <= 0){
                            self.list = [];
                            self.total = 0;
                        }
                    }
                    callback&&callback();
                });
            },
            menuChange:function(name){
                this.start=0;
                this.total = 0;
                this.menuIndex = name;
                this.keyWords = '';
                $("#dataEnd").hide();
                this._loadList(0);
            },
            handleInputChange: function () {
              this.start = 0;
              this.total = 0;
              $("#dataEnd").hide();
              this._loadList(0);
            }
        }
    })
</script>
<script>
    wx_share.init({
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        "hideAllnone":true
    });
</script>
</html>
